<template>
  <div class="kaocha">
    <el-dialog title="批示意见/办理提示" :visible.sync="noticeVisible" width="95%">
      <notice :timestamp="timestamp" :noticePersonId="noticePersonId" :step="selStep" @refresh="refresh"></notice>
      <div slot="footer" class="dialog-footer" style="overflow:hidden">
        <el-button @click.native="noticeVisible = false" style="float:right">关闭</el-button>
      </div>
    </el-dialog>
    <el-breadcrumb separator=">">
      <el-breadcrumb-item :to="{ path: '/' }">系统首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/selection' }">干部选任</el-breadcrumb-item>
      <el-breadcrumb-item >考察</el-breadcrumb-item>
    </el-breadcrumb>
    <section class="wboxnoborder">
      <div :style="'height:'+tableHeight+'px'">
        <el-scrollbar style="height: calc(100% + 16px);">
          <div style="margin:15px;">
              <el-table
                :data="tableData"
                v-loading="loading"
                border>
                <el-table-column
                  prop="realName"
                  label="姓名"
                  width="100"
                  show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                  prop="candidateUnit"
                  label="目前单位"
                  show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                  prop="currentJob"
                  label="目前职务"
                  width="200"
                  show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                  prop="currentLevel"
                  label="目前职级"
                  width="150"
                  show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                  prop="unitName"
                  label="选任岗位单位"
                  show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                  prop="jobName"
                  label="选任岗位职务"
                  width="200"
                  show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                  prop="jobLevel"
                  label="选任岗位职级"
                  width="150"
                  show-overflow-tooltip>
                </el-table-column>
                <el-table-column label="批示意见/办理提示" width="200">
                  <template slot-scope="scope">
                    <el-popover placement="bottom" width="600" trigger="hover">
                      <notice :noticePersonId="scope.row.busCandidatePersonId" :step="selStep"></notice>
                      <el-button slot="reference" type="primary" @click="showNotice(scope.row.busCandidatePersonId)">查看详情</el-button>
                    </el-popover>
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作"
                  width="150">
                  <template slot-scope="scope">
                    <el-button @click="goKaochaDetail(scope.row)" type="primary">办理</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
        </el-scrollbar>
      </div>
    </section>
  </div>
</template>

<script>
import notice from '../common/Notice'
export default {
  name: 'kaocha',
  components: {
    notice
  },
  data () {
    return {
      timestamp: '',
      selStep: 4,
      noticePersonId: '',
      noticeVisible: false,
      loading: false,
      departmentCode: '',
      tableHeight: 100,
      tableData: []
    }
  },
  methods: {
    showNotice (id) {
      console.log('show notice id:', id)
      this.noticePersonId = id
      this.noticeVisible = true
      this.timestamp = new Date().getTime()
    },
    refresh () {
      this.getList()
      this.timestamp = new Date().getTime()
    },
    getList () {
      this.loading = true
      let url = this.$http.defaults.selectionAPI + 'api/selection/approve/getUserApproveList'
      // console.log(url)
      this.$http.post(url, {
        departmentCode: this.departmentCode,
        step: 4
      }).then(res => {
        console.log('get list33 succ:', res)
        if (res.data.success === true) {
          this.tableData = res.data.result
          this.loading = false
        } else {
          this.loading = false
          this.$message({
            message: '数据获取失败',
            type: 'error'
          })
        }
      })
    },
    goKaochaDetail (item) {
      console.log(item)
      this.$router.push({
        name: 'kaochad',
        params: item
      })
    },
    tableresize (obj) {
      var clientHeight = 0
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      } else {
        clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight
      }
      obj.$nextTick(function () {
        obj.tableHeight = clientHeight - 165
      })
    }
  },
  mounted () {
    let unitName = localStorage.getItem('unitName')
    if (unitName === '干部一处') {
      this.departmentCode = 1
    }
    if (unitName === '干部二处') {
      this.departmentCode = 2
    }
    if (unitName === '干部三处') {
      this.departmentCode = 3
    }
    this.getList()
    this.tableresize(this)
    let _this = this
    window.onresize = function windowResize () {
      // 通过捕获系统的onresize事件触发我们需要执行的事件
      _this.tableresize(_this)
    }
  }
}
</script>
<style>
.kaocha .el-table--border td, .el-table--border th, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
  border-bottom:1px solid #95B8E7;
}
.kaocha .el-table td, .el-table th.is-leaf{
  border-right:1px solid #95B8E7;
}
.kaocha .wboxnoborder .el-table{
  border: #95B8E7 solid 1px;
}
.kaocha .wboxnoborder .el-table th{
  font-weight: normal;
  background-image: linear-gradient(to bottom , #f8f8f8, #efefef);
  text-align: center;
  border-right: #95B8E7 solid 1px;
  border-bottom: #95B8E7 solid 1px;
  min-height: 30px;
  line-height:30px;
}
.kaocha .wboxnoborder .el-table td, .el-table th{
  padding:0;
  font-size:var(--size14) !important;
  line-height: 20px;
  font-family: '宋体';
  text-align: center;
}
.kaocha .el-table__row{
  height: 50px;
}
</style>
<style scoped>
.kaocha {
  width: 100%;
  box-sizing: border-box;
}
.kaocha .wboxnoborder {
  padding: 0;
  width: 100%;
  background-color: #fff;
  margin: 0 10px;
  overflow: hidden;
}
</style>
